<template>
  <div>
    <template v-if="isItemMenu(item)">
      <el-menu-item :index="item.path">
        <i :class="item.icon"></i>
        <span>{{item.name}}</span>
      </el-menu-item>
    </template>

    <el-submenu v-else-if="isSubMenu(item)" ref="subMenu" :index="item.path" popper-append-to-body>
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{item.name}}</span>
      </template>
      <navigationItem
          v-for="child in item.children"
          :key="child.path"
          :is-nest="true"
          :item="child"
          class="nest-menu"
      />
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: "navigationItem",
  props: {
    // route object
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  methods: {
    isItemMenu(item) {
      if (item.type === 'M') {
        return true
      }
      return false
    },
    isSubMenu(item) {
      if (item.type === 'L') {
        return true;
      }
      return false;
    }
  }
}
</script>

<style scoped lang="less">
@font-size: 18px;

/deep/
.el-submenu__title {
  font-size: @font-size
}

.el-menu-item {
  font-size: @font-size
}
</style>